<template>
    <el-row>
        <el-col :span="12" class="white-block">
            <p>普通下拉树</p>
            <select-tree :options="options"></select-tree>
            <p class="mt20">懒加载下拉树</p>
            <select-tree @loadNode="loadNode" :lazy="true"></select-tree>
            <p class="mt20">有默认值的下拉树</p>
            <select-tree :options="options" :model.sync="select1"></select-tree>
            <select-tree @loadNode="loadNode" :lazy="true" :model.sync="select1" class="mt10"></select-tree>
        </el-col>
        <el-col :span="11" :offset="1" class="white-block">

        </el-col>
    </el-row>
</template>

<script>
    import selectTree from '../components/select-tree'

    export default {
        name: '',
        data() {
            return {
                options: [
                    {
                        id: 1,
                        label: '222'
                    },
                    {
                        id: 2,
                        label: '333'
                    }
                ],
                select1: {
                    value: 1,
                    label: '222'
                }
            }
        },
        mounted() {

        },
        methods: {
            loadNode(parentId, callback) {
                this.$http.get('/gsUserRes/getDeptList', {
                    parentId: parentId
                }).then(result => {
                    if (result.success) {
                        if (result.data[0]) {
                            result.data.forEach(item => {
                                if (item.expand) {
                                    item.isLeaf = false
                                } else {
                                    item.isLeaf = true
                                }
                                if (!item.label) {
                                    item.label = item.abbreviation || item.name
                                }
                            })
                        }
                        if (callback) callback(result.data)
                    }
                }).catch(() => {

                })
            }
        },
        components: {
            selectTree
        }
    }
</script>

<style scoped lang="less">

</style>
